$animationTime:         .3s;
$opacity:               0.8;
$border-radius:         6px;
$padding-top:           12px;
$padding-left:          14px;
$loading-size:          42px;

.tip {
    position: fixed;
    z-index: 199;
    display: none;

    .tip-show {
        z-index: 1;
        color: #FFF;
        position: fixed;
        line-height: 20px;
        white-space: pre;
        word-wrap: break-word;
        max-width: 70%;
        text-align: center;
        background-color: rgba(0,0,0, $opacity);
        padding: $padding-top $padding-left;
        top: 50%; left: 50%;
        border-radius: $border-radius;
        transform: translate(-50%, -50%);
    }

    .tip-back {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0, $opacity);
    }

    &.has-back .tip-back {
        display: block;
    }

    &.has-loading {
        .tip-back {
            display: block;
            background-color: transparent;
        }

        .tip-show {
            width: $padding-left*2 + $loading-size;
            height: $padding-left*2 + $loading-size;
            background-color: rgba(0,0,0, $opacity*1.2);
        }
    }

    &.show {
        display: block;
        animation-name: fadeIn;
        animation-duration: $animationTime;
    }

    &.hide {
        display: none;
        animation-name: fadeOut;
        animation-duration: $animationTime;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes rotate {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}